草庐IT

CSS 导航栏图标

全部标签

javascript - 如何添加箭头图标以展开和折叠带有可展开行的 Angular Mat-Table 中的任何行?

我创建了一个带有可扩展行的垫子表,就像Angular8中的这个一样:https://stackblitz.com/angular/pmagobelkkg?file=app%2Ftable-expandable-rows-example.ts但是,如上例所示,仅当我单击该行中的某处时,该行才会展开。有什么方法可以为每一行添加向上和向下箭头图标,这样只有当我点击每一行中的图标时,该行才会展开吗?非常感谢! 最佳答案 这是您的stackblitz的解决方案。Forkedstackblitz希望对您有所帮助!

javascript - TinyMCE 正在改变我的内联 CSS

我在HTML编辑器中输入:我点击更新,然后再次点击html编辑器。HTML(在Firefox中)已更改为:如果我在InternetExplorer中做同样的事情,HTML会变成: 为什么世界会发生变化?也许我可以更改一些TinyMCE设置?但我已经清理了:false。想法?如果我启用清理,我提到的更改就不会发生。然而,TinyMCE改变了很多其他东西。我不希望它弄乱我的代码:(任何帮助将不胜感激。 最佳答案 尝试将verify_html设置为false。文档:TinyMCEConfiguration/verify_html

javascript - 使用 JavaScript 事件处理程序和函数的 CSS3 转换不会在 Firefox 中触发

我已经建立了一个多月的画廊,布局很简单,左边是缩略图菜单,右边是画廊预览。当您单击已加载的缩略图时,它会触发一个mousdown事件,该事件会折叠缩略图区域并将画廊预览扩展到完整大小(全部使用CSS3转换)。到目前为止,一切正常,除了我创建了一个omouseover事件,当您将鼠标悬停在缩略图上时该事件会激活该功能。该函数重绘图库预览div(“图片”)的内容并创建三张图像,两张是帧中的上一张图像,一张是帧中的下一张图像(在中心)。在innerHTML中,它将CSS样式“left:”设置为724px或-724px,具体取决于它是向前还是向后。然后当生成所有这些html的函数完成时,负责监

javascript - 找出哪个 CSS 属性正在被 jQuery 动画化

我看到$element.is(':animated')告诉我$element是否正在设置动画,但是否可以查看哪些css属性正在设置动画。 最佳答案 是的,将step函数传递给animate()调用可以让您找出正在通过fx.prop设置动画的属性。以下是jQueryAPI文档中的示例:$('li').animate({opacity:.5,height:'50%'},{step:function(now,fx){vardata=fx.elem.id+''+fx.prop+':'+now;$('body').append(''+data

javascript - Twitter Bootstrap 粘性子导航在它应该在较短的页面上之前变得固定

我实现了一个自动float的子导航栏,直接取自BootstrapdocsCSSandJS,在我正在处理的网站中。它只出现在一个View中,但这是一个RailsView,因此它是根据加载的对象动态生成的。我发现,当出现在子导航栏下方的内容足够长时,子导航栏的行为会按预期工作-subnav-fixed类会在子导航栏滚动时立即添加看不见。但是,如果页面比这短,子导航栏将在它实际超出View之前固定,这会产生非常刺耳的跳转,更不用说您可以看到该栏曾经所在的空间,您应该看不到。我应该补充一点,我使用的是固定的(主)导航栏,并考虑了适当的主体填充。问题似乎出在返回的$('.subnav').off

javascript - 通过键盘导航表格?

我正在尝试制作一个可以执行以下操作的表格。行x列=3x3:好的通过键盘导航:确定当“焦点”(或其他东西)位于单元格更新div2上时,data-param2:不起作用。按键盘上的Enter键时,使用数据参数1更新div1:不工作arrows.htmvarb4="";varcol=1;varrow=1;functionbg(){varrc="r"+row+"c"+col;if(b4=="")b4=rc;document.getElementById(b4).style.backgroundColor="white";document.getElementById(rc).style.bac

javascript - 动态图标的更新频率

我想了解如何使用GoogleChrome浏览器动态更新网站图标,我注意到浏览器似乎限制了每秒更新网站图标的频率,这让事情看起来很草率。我为此制作的测试页是:http://staticadmin.com/countdown.html这只是一条显示倒计时结果的滚动消息。我添加了一个输入字段来调整脚本每秒移动多少像素,我已经观察到在GoogleChrome中的最大值约为每秒5帧,但我没有在任何其他浏览器中对其进行测试。我的问题是最大频率是多少,有什么方法可以改变它,背后有什么特别的原因吗?注意:我还注意到该值也会根据窗口焦点而变化。当浏览器的窗口未处于焦点时,它似乎下降到每秒大约1次更新,并

javascript - 隐藏元素时是否禁用 CSS3 转换?

我注意到(在Chrome43中使用jQuery)当元素有display:none时,转换被禁用。这种在所有浏览器上的标准化行为是jQuery的一个特性,还是生产中不能依赖的东西?当要在延迟函数中更改动画的CSS语句时,将启用转换。TakealookatthisJSFiddle.取消注释第3行或6以自行查看。解决方案:在生产中不能依赖此行为,因为它似乎是优化/设计选择而非规范的产物(根据@AndriyHorens的回答)。相反,您应该使用类打开和关闭动画(transition-property:none)。在Chrome43中,未能使用某个类使它对我来说不可靠。Chrome确实还需要单独

javascript - CSS随机动画

我的想法是制作一个图像,将其分解成小的部分,这些部分会在飞走时按比例缩小。我已经成功地使用了几个CSS动画-scale+translate3d-(结果不是很好,但这是一个开始)。现在,问题是我希望翻译是随机的。据我所知,有一种涉及JS/Jquery/GSAP的简单方法,还有一种涉及SCSS/Sass的更复杂的方法...我对他们都不熟悉。我找到了一个使用javascript来随机旋转的代码,并且我已将其改编为我的翻译。代码已发布here作为答案。//searchtheCSSOMforaspecific-webkit-keyframerulefunctionfindKeyframesRul

javascript - CSS 和 javascript 中的 (Chromium) alpha 颜色值(在 rgba 中)

如果我在javascript中通过rgba(r,g,b,a)将alpha值设置为1以外的任何值,则浏览器设置的实际值会略有不同。但是CSS中设置的值是完全匹配的。请参阅中的代码示例code-pen-sitewindow.onload=function(){document.getElementById("p1").style["background-color"]="rgba(255,0,0,0.3)";}RGBcolorswithopacity:RedGreen使用Chromium浏览器按F12激活检查器检查“红色”。“红色”的背景颜色设置为rgba(255,0,0,0.3),但在I